<!DOCTYPE html>
<html class="ui-page-login">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  <title></title>
  <link href="../css/mui.css" rel="stylesheet" />
  <link href="../css/login.css" rel="stylesheet" />
  <style>
    .area {
      margin: 20px auto 0px auto;
    }
    
    .mui-input-group:first-child {
      margin-top: 20px;
    }
    
    .mui-input-group label {
      width: 22%;
    }
    
    .mui-input-row label~input,
    .mui-input-row label~select,
    .mui-input-row label~textarea {
      width: 78%;
    }
    
    .mui-checkbox input[type=checkbox],
    .mui-radio input[type=radio] {
      top: 6px;
    }
    
    .mui-content-padded {
      margin-top: 25px;
      line-height: 1.6;
    }
    
    .mui-btn {
      padding: 10px;
    }
    
    .mr-hide {
      display: none;
    }
  </style>
</head>

<body>
  <header class="mui-bar mui-bar-nav">
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <h1 class="mui-title">注册</h1>
  </header>
  <div class="mui-content">
    <div class="mcc-img">
      <img src="../images/logo.png" />
    </div>

    <form class="mui-input-group">
      <div class="mui-input-row">
        <label><span class="mui-icon mui-icon-phone"></span></label>
        <input id='phone' type="number" class="mui-input-clear mui-input" placeholder="请输入手机号">
      </div>
      <div class="mui-input-row">
        <label><span class="mui-icon mui-icon-email"></span></label>
        <div class="mir-right">
          <input id='code' type="number" class="mui-input mr-code" placeholder="请输入验证码">
          <button type="button" class="mui-btn mui-btn-primary mr-send" data-type="code"><span id="code_text">发送验证码</span> <span class="mui-badge mui-badge-primary mr-hide"><span id="countdown">60</span>s</span></button>

        </div>
      </div>
      <div class="mui-input-row">
        <label><span class="mui-icon mui-icon-locked"></span></label>
        <input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
      </div>
      <div class="mui-input-row">
        <label><span class="mui-icon mui-icon-compose"></span></label>
        <input id='password_confirm' type="password" class="mui-input-clear mui-input" placeholder="请确认密码">
      </div>
    </form>
    <div class="mui-checkbox mui-content-padded">
      <input style="position: static;" name="checkbox" value="agree" id="i_agree" type="checkbox" checked>
      <span>我已阅读并同意<a href="javascript:;" id="server_protocol">《青岛利众网络科技平台入驻服务协议》</a></span>
    </div>
    <div class="mui-content-padded">
      <button id='reg' class="mui-btn mui-btn-block mui-btn-primary">注册</button>
    </div>
  </div>
</body>

<script src="../js/mui.js"></script>
<script src="../js/app.js"></script>
<script src="../js/http.js"></script>
<script>
  (function($, doc) {
    var settings = app.getSettings(),
      regButton = doc.getElementById('reg'),
      accountBox = doc.getElementById('phone'),
      codeBox = doc.getElementById('code'),
      passwordBox = doc.getElementById('password'),
      passwordConfirmBox = doc.getElementById('password_confirm'),
      IAgreeEle = doc.getElementById('i_agree'),
      serverProtocolEle = doc.getElementById('server_protocol');
      codeFlag = true;

    serverProtocolEle.addEventListener('tap', function() {
      app.toPage('declare.html');
    }, false);

    $(document.body).on('tap', '.mr-send', function(e) {
      let phoneEle = doc.getElementById('phone'),
        phone = phoneEle.value,
        phoneRule = /^(13\d|15[^4\D]|17[013678]|18\d)\d{8}$/;

      if (!phone) {
        return $.toast('手机号输入为空');
      }

      if (phone.length < 11) {
        return $.toast('手机号为11位,请重新输入');
      }

      if (!phoneRule.test(phone)) {
        return $.toast('手机号输入有误!请重新输入');
      }

      if (!codeFlag) return;
      codeFlag = false;

      $(this).button('loading');
      setTimeout(function() {
        $(this).button('reset');

        http.post(API.postVertCode, {
          username: phone
        }, function(res) {
          console.log('res-->>', res);
          /* $.toast('验证码:' + res.data.code, {
            duration: 'long',
            type: 'div'
          }); */
        });

        var type = this.dataset.type;
        if (type === 'code') {
          var countdown = document.getElementById('countdown'),
            codeText = document.getElementById('code_text'),
            mrHide = document.querySelector('.mr-hide'),
            cdNum = countdown.innerText;

          codeText.innerText = '正在发送...';
          mrHide.style.display = 'inline-block';

          var interval = setInterval(function() {
            cdNum -= 1;
            countdown.innerText = cdNum;
            if (cdNum === 0) {
              codeText.innerText = '发送验证码';
              mrHide.style.display = 'none';
              clearInterval(interval);
              codeFlag = true;
            }
          }, 1000);
        }
      }.bind(this), 2000);
    });

    IAgreeEle.addEventListener('change', function() {
      console.log('this.checked-->>', this.checked);
    });

    regButton.addEventListener('tap', function(event) {
      var regInfo = {
          account: accountBox.value,
          code: codeBox.value,
          password: passwordBox.value
        },
        passwordConfirm = passwordConfirmBox.value;
      if (passwordConfirm != regInfo.password) {
        $.toast('密码两次输入不一致');
        return;
      }

      $.confirm();


      app.reg(regInfo, function(err) {
        if (err) {
          $.toast(err);
          return;
        }

        if (!IAgreeEle.checked) return $.toast('需要同意服务协议');

        /* if (IAgreeEle.checked) {}
          alert(123); */
        let reqRegInfo = {
          username: regInfo.account,
          password: regInfo.password,
          verification_code: regInfo.code
        };
        http.post(API.postRegister, reqRegInfo, res => {
          $.toast(res.msg);

          var reqUrl = API.postLogin + '?login_type=pwd',
            loginInfo = {
              username: regInfo.account,
              password: regInfo.password
            };

          http.post(reqUrl, loginInfo, res => {
            if (res.code === 200) {
              var userCache = {
                username: regInfo.account,
                token: res.data.token
              };
              localStorage.setItem('$state', JSON.stringify(userCache));

              $.openWindow({
                url: 'person_center.html',
                id: 'person_center',
                show: {
                  aniShow: 'pop-in'
                }
              });
            
            }

          });

        });

      });
      
    });

  }(mui, document));
</script>

</html>